<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Bulletin de terminal</title>
		<link href="bulletin_files/bull.css" rel="stylesheet" type="text/css" title="cd">
		<link href="./js/chosen/chosen.css" rel="stylesheet" type="text/css" title="cd">
		<script type="text/javascript" src="http://cm.jetcamer.com/plugins/jquery/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="http://cm.jetcamer.com/plugins/jquery/ui.core.js"></script>
		<script type="text/javascript" src="http://cm.jetcamer.com/plugins/jquery/ui.widget.js"></script>
		<script type="text/javascript" src="http://cm.jetcamer.com/plugins/jquery/ui.mouse.js"></script>
		<script type="text/javascript" src="http://cm.jetcamer.com/plugins/jquery/ui.draggable.js"></script>
		<script type="text/javascript" src="./js/chosen/chosen.jquery.min.js"></script>
		<script type="text/javascript" src="http://gsmia.org/stage/note.php?listeEtudiant&<?php echo time(); ?>"></script>
		
		
<script type="text/javascript">
function calculateMoy(seq_1,seq_2,compo){
	var moy = new Array();
	var i = 0;
	while(i < seq_1.length){
		moy[i] = (parseFloat(seq_1[i]) + parseFloat(seq_2[i]) + parseFloat(compo[i]))/3.0
		i++;
	}
	return moy;
}

var chart;
var matieres = Array();
var seq_1 = Array();
var seq_2 = Array();
var compo = Array();
var moyenne = Array();

var max = Array();
var min = Array();

max["seq_1"] = Array();
max["seq_2"] = Array();
max["compo"] = Array();

min["seq_1"] = Array();
min["seq_2"] = Array();
min["compo"] = Array();

$(document).ready(function() {
	var nbrEtudiant = etudiants.length;
	var randomStudent = Math.floor((Math.random()*5)+1);
	var randomStudentId = etudiants[randomStudent].id_etudiant;
	for(var i=0; i<nbrEtudiant; i++){
		var fullName = etudiants[i].nom +" "+ etudiants[i].prenom;
		var id = etudiants[i].id_etudiant;
		$("#listeEtudiant").append("<option value='"+i+"'>"+fullName+"</option>");
	}
	
	$("#listeEtudiant").change(function(){
		initBulletin($(this).val());
	});
	
	$("#listeEtudiant").chosen();
	
	initBulletin(randomStudentId);
	moyenne = calculateMoy(seq_1,seq_2,compo);
	//drawChart(seq_1,seq_2,compo, moyenne, matieres);
	//$("#chart").draggable();
});

function drawChart(seq_1,seq_2,compo, moyenne, matieres){
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container'
		},
		title: {
			text: 'Diagramme Des Notes'
		},
		xAxis: {
			categories: matieres
		},
		tooltip: {
			formatter: function() {
				var s;
				if (this.point.name) { // the pie chart
					s = ''+
						this.point.name +': '+ this.y +' /20';
				} else {
					s = ''+
						this.x  +': '+ this.y;
				}
				return s;
			}
		},
		labels: {
			items: [{
				html: 'Repartitions sequentielles',
				style: {
					left: '40px',
					top: '8px',
					color: 'black'
				}
			}]
		},
		series: [{
			type: 'column',
			name: 'Seq 1',
			data: seq_1
		}, {
			type: 'column',
			name: 'Seq 2',
			data: seq_2
		}, {
			type: 'column',
			name: 'Compo',
			data: compo
		}, {
			type: 'spline',
			name: 'Moy',
			data: moyenne
		}, {
			type: 'pie',
			name: 'Total consumption',
			data: [{
				name: 'Seq 1',
				y: 13,
				color: '#4572A7' // Seq 1 's color
			}, {
				name: 'Seq 2',
				y: 23,
				color: '#AA4643' // Seq 2 's color
			}, {
				name: 'Compo',
				y: 19,
				color: '#89A54E' // Compo's color
			}],
			center: [100, 80],
			size: 100,
			showInLegend: false,
			dataLabels: {
				enabled: false
			}
		}]
	});
}
function closeChart(){
	jQuery("#chart").fadeOut();
}
function openDiagram(){
	updateChart();
	jQuery("#chart").fadeIn();
}


function updateChart(){
	setDrawingArrays();
	moyenne = calculateMoy(seq_1,seq_2,compo);
	drawChart(seq_1,seq_2,compo, moyenne, matieres);
	var params ="seq_1=1";
	jQuery.ajax({
		type: "POST",
		data: params,
		url: "./updateBulletin.php",
		success: function(o) {

		}
	});
}

function minDiagram(){
	moyenne = calculateMoy(min["seq_1"],min["seq_2"],min["compo"]);
	drawChart(max["seq_1"],max["seq_2"],max["compo"], moyenne, matieres);
}
</script>
<script type="text/javascript" src="http://gsmia.org/diagrams/js/highcharts.js"></script>
<script type="text/javascript" src="http://gsmia.org/diagrams/js/modules/exporting.js"></script>

<style>
	#bull tbody tr td{
		border:thin solid black;
		text-align:center;
	}
	#bull tbody tr th{
		border:thin solid black;
		width:160px;
	}
	
	#bull tbody tr td input {
		width:50px;
		height:30px;
		border:none;
		text-align:center;
	}
	#bull thead tr th{
		width:50px;
		height:30px;
		border:thin solid black;
	}
	#bull thead, #bull tbody, #bull tfoot{
		
	}
	#entete {
		margin-bottom:3px;
	}
	.blank {
		height:10px;
	}
	header img{
		position:absolute;
		left:10px;
		top:10px;
	}
	header, section{
		width:700px; 
		margin:auto;
	}
	#showDiagram{
		left: 40px;
		position: absolute;
		top: 100px;
		padding:0px;
		margin:0px;
		list-style-type: none;
	}
	#showDiagram a{
		color: grey;
		font-size: 20px;
		font-weight: bold;
	}
	#listeEtudiant, #listeEtudiant_chzn{
		left: 25px;
		position: absolute;
		top: 235px;
		width: 200px;
	}
	#loaderImg{
		display:none;
		width:16px;
		height:16px;
		position:absolute;
		left:170px;
		top:105px;
	}
	#chart{
		display:none;
	}
</style>
</head>
<body>
<div id="chart" style="z-index:100; position:relative; border:thin solid grey; width:800px; height:400px; position:absolute; top:150px; left:100px;">
	<div id="container" style="width: 800px; height: 400px; margin: 0 auto;"></div>
	<a style="position:absolute; right:65px; top:6px;" href="javascript:;" onclick="closeChart()"><img src="img/close.png" border="0" /></a>
</div>
<div style="position: absolute;">
</div>
<div id="corps">
	<header>
		<img src="bulletin_files/fleming.png">
		<ul id="showDiagram">
			<li><a id="" href="javascript:;" onclick="openDiagram()">Gle Diagram</a></li>
			<li><a id="" href="javascript:;" onclick="minDiagram()">Min Diagram</a></li>
			<li><a id="" href="javascript:;" onclick="maxDiagram()">Max Diagram</a></li>
			<li><a id="" href="javascript:;" onclick="moyDiagram()">Moy Diagram</a></li>
			<li><a id="" href="javascript:;" onclick="min_maxDiagram()">Min_Max Diagram</a></li>
		</ul>
		<img id="loaderImg" src="./img/loading.gif">
		<select name="listeEtudiant" id="listeEtudiant" class="listeEtudiant">
		</select>
		<div>
			<h3 align="center">COLLEGE LAIC FLEMING</h3>
			<p align="center">Autorisation N°256/j2/MINEDUC/SG/DEP/SECP/SCAFES/SCAFEP<br>
			Apprendre et enseigner avec des nouvelles technologies de l'information et la communication</p>
			<hr color="green" width="70%">
			<h2 align="center">BULLETIN TRIMESTRIELLE</h2>
		</div>
	</header>
	<section id="tableau">
		<div id="entete">
			<table id="tete">
				<tbody><tr><td>Noms et prénoms :</td><td><input name="name" id="nomEleve" type="text"></td><td>Année scolaire :</td><td><input name="annee" type="text"></td></tr>
				<tr><td>Date de naissance :</td><td><input name="naiss" id="naissEleve" type="text"></td><td>Classe :</td><td><input name="classe" type="text"></td></tr>
				<tr><td>Matricule :</td><td><input name="matricule" id="matriculeEleve" type="text"></td><td>Effectif :</td><td><input name="classe" type="text"></td></tr>
			</tbody></table>
		</div>
		<table id="bull" cellpadding="0" cellspacing ="0">
			<thead>
				<tr>
					<th>MATIERES<br><i>Enseignants</i></th><th>Seq 1</th><th>Seq 2</th><th>Compo</th><th>Moy/20</th>
					<th>Coef</th><th>Total</th><th>Rang</th><th colspan="2">Appreciations</th>
				</tr>
			</thead>
			<tfoot>
				
					<tr><th class="green" rowspan="2">TOTAL<br>TRIMESTRE</th><td colspan="7" rowspan="2"></td><th>Moy trimestriel:   /20</th><th>Rang:   /</th>
				</tr>
				
					<tr><th colspan="8">Moy générale:   /20</th>
				</tr>
			</tfoot>
			<tbody>
				<tr class="activite">
					<th class="green">Activités scientifiques</th><td colspan="10"></td>
				</tr>
				<tr id="maths" class="matiere">
					<th>Mathématiques<br><i>M. Sillenou</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="physique" class="matiere">
					<th>Physique<br><i>M. Fouossong</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="chimie" class="matiere">
					<th>Chimie<br><i>M. Fouossong</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="info" class="matiere">
					<th>Informatique<br><i>M. Guechoou</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="grp1" class="group">
					<th class="grise">TOTAL GROUPE 1</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr class="blank">
					<td colspan="10"></td>
				</tr>
				<tr class="activite">
					<th class="green">Activités Littéraires</th><td colspan="10"></td>
				</tr>
				<tr id="philo" class="matiere">
					<th>Philosophiie<br><i>Mme. Kowagne</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="langue" class="matiere">
					<th>Langue française<br><i>M. Gue</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="litterature" class="matiere">
					<th>Littérature française<br><i>M. Gue</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="svt" class="matiere">
					<th>Science de la vie et de la terre<br><i>Mme. Guimfack</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="hist" class="matiere">
					<th>histoire<br><i>Mme. Kuipou</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="geo" class="matiere">
					<th>Géographie<br><i>Mme. Kuipou</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="ec" class="matiere">
					<th>Education à la citoyenneté<br><i>Mme. Kuipou</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="eps" class="matiere">
					<th>Education Physique<br><i>M. Foum</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="tm" class="matiere">
					<th>E.S.F./TM<br><i>M. Djakoum</i></th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr id="grp2" class="group">
					<th class="grise">TOTAL GROUPE 2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td>
				</tr>
				<tr class="blank">
					<td colspan="10"></td>
				</tr>
			</tbody>
		</table>
	</section><br>
	<footer>
		<h4>OBSERVATION DU CHEF D'ETABLISSEMENT</h4><br>
		<textarea></textarea><br>
		<h5>LE PRINCIPAL</h5><br>
		<span id="date">Yaounde le,</span>
	</footer>
</div>
<script>
	var seq_1Pos = 2;
	var seq_2Pos = 3;
	var compoPos = 4;
	var coefPos = 6;
	
	var coefs = new Object();
	var matieresGrp_1 = Array();
	var matieresGrp_2 = Array();
	var matieres = matieresGrp_1.concat(matieresGrp_2); 				
	var seq_1 = jQuery("#bull tbody tr:not('.group, .activite, .blank') td:nth-child(2)");
	var seq_2 = jQuery("#bull tbody tr:not('.group, .activite, .blank') td:nth-child(3)");
	var seq_3 = jQuery("#bull tbody tr:not('.group, .activite, .blank') td:nth-child(4)");
	
	var inputElt = '<input type= "text" value = "2" onkeyup="updateBulletinforValue(this)" />';
	jQuery(seq_1).html(inputElt);
	jQuery(seq_2).html(inputElt);
	jQuery(seq_3).html(inputElt);

	function updateBulletinforValue(elt){
		var parentId = jQuery(elt).parent().parent().attr('id');
		var curEltval = jQuery(elt).val();
		if(curEltval<0 || curEltval > 20){
			jQuery(elt).css("background-color","red");
			return false;
		}else{
			jQuery(elt).css("background-color","white");
			calculate(parentId);
		}
	}
	
	function calculate(parentId){
		var maths = jQuery("#" + parentId + " td");
		var totalMaths = 0;
		
		for (var i=0; i<3; i++){
			var curElt = jQuery(maths[i]).children('input');
			var curval = parseFloat(jQuery(curElt).val());
			if(isNaN(curval) == true)
				curval = 0;
			totalMaths += curval;
		}
		var mathsCoeff = parseInt(jQuery(maths[4]).text());
		var moyMath = (totalMaths/3.0).toFixed(2);
		var totalMath = (moyMath*mathsCoeff).toFixed(2);
		var appreciation = getMention(moyMath);
		jQuery(maths[3]).html(moyMath);
		jQuery(maths[5]).html(totalMath);
		jQuery(maths[7]).html(appreciation);
		
		calculTotalGrp();
	}
	
	function getMention(note){
		note = parseInt(note);
		if(note<5)
			return "Tres-Mal";
		if(note<8)
			return "Mal";
		if(note<10)
			return "Mediocre";
		if(note<12)
			return "Passable";
		if(note<14)
			return "Assez-Bien";
		if(note<16)
			return "Bien";
		if(note<18)
			return "Tres-Bien";
		if(note<20)
			return "Honorable";
		if(note==20)
			return "Tres-Honorable";
	}
	
	function initBulletin(i){

		$("#loaderImg").show();
		
		var id_eleve = etudiants[i].id_etudiant;
		var nomEleve = etudiants[i].nom + " " + etudiants[i].prenom;
		var naissEleve = etudiants[i].date_de_naissance;
		var matriculeEleve = etudiants[i].matricule;
		
		$("#nomEleve").val(nomEleve);
		$("#naissEleve").val(naissEleve);
		$("#matriculeEleve").val(matriculeEleve);
		
		$.getJSON("note.php", {id_etudiant: id_eleve}, function(json) {
		
			eval('nom_matiere = ' + json["nom_matiere"]);
			eval('moy_table = ' + json["moy_table"]);
			eval('grp_table = ' + json["grp_table"]);
			eval('coef_table = ' + json["coef_table"]);
			eval('moy_max = ' + json["moy_max"]);
			eval('moy_min = ' + json["moy_min"]);
			
			var i = 0;
			var j = 0;
			
			
			var grp_1_idx = 0;
			var grp_2_idx = 0;
			for(key in nom_matiere) {
				matieres[j] = key;
				
				jQuery("#"+key+" td:nth-child("+coefPos+")").html(coef_table[key]);
				
				if(parseInt(grp_table[key]) == 1)
					matieresGrp_1[grp_1_idx++] = key;
					
				if(parseInt(grp_table[key]) == 2)
					matieresGrp_2[grp_2_idx++] = key;
				j++;
			}

			var idx = 0;
			for(key in moy_table) {
			
				var ids = key.split("\@");
				var matiere = ids[0];
				var exam = ids[1];

				if(exam == "seq_1"){
					jQuery("#"+matiere+" td:nth-child("+seq_1Pos+") input").val(moy_table[key]);
					max["seq_1"][idx] = moy_max[key];
					min["seq_1"][idx] = moy_min[key];
				}
					
				if(exam == "seq_2"){
					jQuery("#"+matiere+" td:nth-child("+seq_2Pos+") input").val(moy_table[key]);
					max["seq_2"][idx] = moy_max[key];
					min["seq_2"][idx] = moy_min[key];
				}
					
				if(exam == "compo"){
					jQuery("#"+matiere+" td:nth-child("+compoPos+") input").val(moy_table[key]);
					max["compo"][idx] = moy_max[key];
					min["compo"][idx] = moy_min[key];
					document.title = max["compo"][idx];
				}
				idx++;
				i++;
			}

			for(var i=0; i<matieresGrp_1.length; i++){
				calculate(matieresGrp_1[i]);
			}

			for(var i=0; i<matieresGrp_2.length; i++){
				calculate(matieresGrp_2[i]);
			}

			setDrawingArrays();
			calculTotalGrp();
			
			moyenne = calculateMoy(seq_1,seq_2,compo);
			drawChart(seq_1,seq_2,compo, moyenne, matieres);
			$("#loaderImg").fadeOut();
			
		});

	}
	
	function setDrawingArrays(){

		//Seq 1
		for(var i=0; i<matieres.length; i++){
		
			var value = jQuery("#"+matieres[i]+" td:nth-child("+seq_1Pos+") input").val();
			seq_1[i] = parseFloat(value);
		}
		
		//Seq 2
		for(var i=0; i<matieres.length; i++){
			var value = jQuery("#"+matieres[i]+" td:nth-child("+seq_2Pos+") input").val();
			seq_2[i] = parseFloat(value);
		}
		
		//Compo
		for(var i=0; i<matieres.length; i++){
			var value = jQuery("#"+matieres[i]+" td:nth-child("+compoPos+") input").val();
			compo[i] = parseFloat(value);
		}
	}
	
	function calculTotalGrp(){
		var totalGrp_1 = 0;
		var totalGrp_2 = 0;
		var totalCoef_1 = 0;
		var totalCoef_2 = 0;
		var moyPos = 5;
		var coefPos = 6;
		var totalPos = 7;
		var j = 0;
		for(var i=0; i<matieresGrp_1.length; i++){
			var moy = parseFloat(jQuery("#"+matieresGrp_1[i]+" td:nth-child("+totalPos+")").text());
			var cf = parseInt(jQuery("#"+matieresGrp_1[i]+" td:nth-child("+coefPos+")").text());
			totalGrp_1 += moy;
			totalCoef_1 += cf;
			
		}
		
		for(var i=0; i<matieresGrp_2.length; i++){
			var moy = parseFloat(jQuery("#"+matieresGrp_2[i]+" td:nth-child("+totalPos+")").text());
			var cf = parseInt(jQuery("#"+matieresGrp_2[i]+" td:nth-child("+coefPos+")").text());
			totalGrp_2 += moy;
			totalCoef_2 += cf;
			
		}
		
		var moyGrp_1 = (totalGrp_1/totalCoef_1).toFixed(2);
		var moyGrp_2 = (totalGrp_2/totalCoef_2).toFixed(2);
		
		jQuery("#grp1 td:nth-child("+totalPos+")").html(totalGrp_1.toFixed(2));
		jQuery("#grp2 td:nth-child("+totalPos+")").html(totalGrp_2.toFixed(2));
		
		jQuery("#grp1 td:nth-child("+coefPos+")").html(totalCoef_1);
		jQuery("#grp2 td:nth-child("+coefPos+")").html(totalCoef_2);
		
		jQuery("#grp1 td:nth-child("+moyPos+")").html(moyGrp_1);
		jQuery("#grp2 td:nth-child("+moyPos+")").html(moyGrp_2);
	}
</script>
</body>
</html>